<template>
    <div class="data-source">
        <div>
            <el-button size="small" type="primary" @click="addDataSource">添加</el-button>
        </div>
        <div class="list">
            <template v-for="(item,idx) in designer.dataSource">
                <div class="list-item" :key="idx">
                    <div>
                        <el-tag>{{ item.name }}</el-tag>
                        <div style="font-size: 12px;margin-top: 10px;text-indent: 10px">描述： {{ item.remark }}</div>
                    </div>
                    <div class="list-item-operation">
                        <el-button type="text" icon="el-icon-edit-outline"
                                   @click="editDataSource(item,idx)"></el-button>
                        <el-button type="text" icon="el-icon-delete" @click="delDataSource(idx)"></el-button>
                    </div>
                </div>
            </template>
        </div>

        <div class="drawer" v-if="visible&&fVisible" :style="{left:width}">
            <div class="drawer-header">
                <div>新增数据源</div>
                <div>
                    <el-button type="text" @click="saveDataSource">确定</el-button>
                    <el-button type="text" @click="visible=false">取消</el-button>
                </div>
            </div>
            <div class="drawer-container">
                <el-form ref="form" size="small" :model="formData" :rules="rules" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="名称" prop="name">
                                <span slot="label">
                                    名称
                                     <el-tooltip effect="light"
                                                 content="禁止使用javaScript关键字（严格遵守javaScript命名规范）">
                                        <i class="el-icon-info"></i>
                                     </el-tooltip>
                                </span>
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input resize="none" rows="4" type="textarea" v-model="formData.remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请求方法" prop="requestType">
                                <el-radio-group v-model="formData.requestType">
                                    <el-radio-button label="get">GET</el-radio-button>
                                    <el-radio-button label="post">POST</el-radio-button>
                                    <el-radio-button label="put">PUT</el-radio-button>
                                    <el-radio-button label="delete">DELETE</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请求数据格式">
                                <el-radio-group v-model="formData.requestDataType">
                                    <el-radio-button label="params">params</el-radio-button>
                                    <el-radio-button label="data">data</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="是否自动请求">
                                <span slot="label">
                                    是否自动请求
                                     <el-tooltip effect="light" content="页面加载时就请求该接口">
                                        <i class="el-icon-info"></i>
                                     </el-tooltip>
                                </span>
                                <el-switch v-model="formData.autoRequest"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请求地址" prop="url">
                                <el-input v-model="formData.url"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="返回参数结构">
                                 <span slot="label">
                                    返回参数结构
                                     <el-tooltip effect="light"
                                                 content="返回值取值的结构">
                                        <i class="el-icon-info"></i>
                                     </el-tooltip>
                                </span>
                                <div style="display: flex;flex-direction: row;justify-content: space-between">
                                    res
                                    <el-input style="width: 90%" v-model="formData.structure"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请求参数">
                                <draggable tag="ul" :list="formData.requestParameter" style="list-style: none"
                                           v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
                                    <li v-for="(item, idx) in formData.requestParameter" :key="idx">
                                        <div class="li">
                                            <i class="el-icon-rank drag-option"></i>
                                            <el-col :span="6">
                                                <el-input placeholder="key" v-model="item.key" size="mini"></el-input>
                                            </el-col>
                                            <span>&nbsp;</span>
                                            <el-input placeholder="value" v-model="item.value" size="mini"></el-input>
                                            <el-button type="text" icon="el-icon-delete"
                                                       @click="del(idx,'RP')"></el-button>
                                        </div>
                                    </li>
                                </draggable>

                                <el-button icon="el-icon-plus" type="primary" size="mini" @click="add('RP')">添加
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请求头信息">
                                <draggable tag="ul" :list="formData.requestHeader" style="list-style: none"
                                           v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
                                    <li v-for="(item, idx) in formData.requestHeader" :key="idx">
                                        <div class="li">
                                            <i class="el-icon-rank drag-option"></i>
                                            <el-input placeholder="key" v-model="item.key" size="mini"></el-input>
                                            <span>:</span>
                                            <el-input placeholder="value" v-model="item.value" size="mini"></el-input>
                                            <el-button type="text" icon="el-icon-delete"
                                                       @click="del(idx,'RH')"></el-button>
                                        </div>
                                    </li>
                                </draggable>
                                <el-button icon="el-icon-plus" type="primary" size="mini" @click="add('RH')">添加
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import Draggable from 'vuedraggable'

export default {
    name: "data-source",
    components: {Draggable},
    props: {
        width: String,
        fVisible: Boolean,
        designer: Object
    },
    data() {
        return {
            visible: false,
            dataSourceList:[],
            formData: {
                name: "",
                remark: "",
                requestType: "",
                url: "",
                requestDataType: "data",
                autoRequest: false,
                //返回参数的结构
                structure: "data.data",
                //请求参数
                requestParameter: [],
                //请求头
                requestHeader: [],
            },
            form: {
                name: "",
                remark: "",
                requestType: "",
                url: "",
                autoRequest: false,
                //返回参数的结构
                structure: "data.data",
                //请求参数
                requestParameter: [],
                //请求头
                requestHeader: [],
            },
            rules: {
                "name": [{required: true, message: "请输入名称", trigger: "blur"}],
                "requestType": [{required: true, message: "请选择请求方式", trigger: "change"}],
                "url": [{required: true, message: "请输入请求地址", trigger: "blur"}],
            },
            formIdx: -1
        }
    },
    methods: {
       
        addDataSource() {
            this.visible = true;
            this.formData = this.deepCopy(this.form);
            this.formIdx = -1;
        },
        editDataSource(item, idx) {
            this.formData = this.deepCopy(item);
            this.formIdx = idx;
            this.visible = true;
        },
        delDataSource(idx) {
            this.designer.dataSource.splice(idx, 1);
        },

        add(type) {
            let m = type === "RP" ? "requestParameter" : "requestHeader"
            this.formData[m].push({key: "", value: ""});
        },
        del(index, type) {
            let m = type === "RP" ? "requestParameter" : "requestHeader"
            this.formData[m].splice(index, 1)
        },
        saveDataSource() {
            this.$refs["form"].validate(f => {
                if (f) {
                    if (this.formIdx === -1) {
                        let names = this.designer.dataSource.map(i => i.name);
                        if (names.includes(this.formData.name)) {
                            this.$message.warning("该数据源名称已存在！");
                            return;
                        }
                        this.designer.dataSource.push(this.deepCopy(this.formData))
                    } else {
                        this.designer.dataSource[this.formIdx] = this.deepCopy(this.formData);
                    }

                    this.visible = false;
                }
            })
        }
    },
    mounted() {
    }
}
</script>
<style scoped lang="scss">
.data-source {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px 20px;

  .list {
    width: 100%;
    height: calc(100% - 40px);
    margin-top: 10px;

    .list-item {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-bottom: 5px;

      .list-item-operation {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;

        .el-button {
          padding: 0;
        }
      }
    }
  }

  .drawer {
    position: fixed;
    left: 300px;
    top: 40px;
    width: 500px;
    height: calc(100% - 40px);
    background: #ffffff;
    z-index: 999;
    border: 1px solid #ddd;
    box-sizing: border-box;

    .drawer-header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      border-bottom: 1px solid #ddd;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .drawer-container {
      width: 100%;
      height: calc(100% - 40px);
      box-sizing: border-box;
      padding: 10px 20px 0;
      overflow-y: scroll;

      .li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-bottom: 5px;

        .el-input {
          padding: 0 5px;
        }
      }
    }
  }
}
</style>
